<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <script>
        function changeImage() {
            document.getElementById("imageCode").src="/account/codeServlet?time="+new Date().getTime();
        }
    </script>
</head>

<body>
<div th:replace="common/top">

</div>

<div id="Content">
    <div>Please enter your username and password.</div>
    <div id="Catalog">
        <form action="/account/signon" method="post">

            <p>Please enter your username and password.</p>
            <p>
            Username:
            <input type="text" name="username" ><br><br>
            Password:
            <input type="password" name="password"><br>
            </p>
            <p th:if="${msg!=null}" th:text="${msg}"></p>
            <p>
            Verification:
                <input type="text" name="codeWord" />
                <img id="imageCode" th:onclick="'javascript:changeImage();'" src="/account/codeServlet">
            <br><br><br>
                <input type="submit" name="signon" value="Login">
            </p>
            <p th:if="${msg2!=null}" th:text="${msg2}"></p>
        </form>
        Need a user name and password?
        <a href="/account/newAccountForm">
            Register Now!
        </a>
    </div>
</div>

<div th:replace="common/botton">

</div>

</body>
</html>